<template>
  <div id="homeContentBar">
    <img id="homeTitleImg1" src="../../../../assets/img/home/titleChar1.png" alt="">
    <img id="homeTitleImg2" src="../../../../assets/img/home/titleChar2.png" alt="">
    <div id="headBtn">
      <el-button id="homeHeadBtn" type="success" round style="background-color: rgba(0,0,0,0);" @click="JumpToSearch">开始查询</el-button>
    </div>
    <el-carousel :interval="30000" loop height="100%">
      <el-carousel-item v-for="(item) in bcImg" :key="item.index" >
        <el-image :src="item.img" style="background-color: rgba(0,0,0,0.1);width: 100%;"></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  import bg1 from "../../../../assets/img/home/homeBac1.jpg"
  import bg2 from "../../../../assets/img/home/homeBac2.jpg"
  import bg3 from "../../../../assets/img/home/homeBac3.jpg"

  export default {
    name: "HomeContentBar",
    data(){
      return {
        bcImg: [
          {img: bg1},
          {img: bg2},
          {img: bg3}
        ],
      }
    },
    methods:{
      JumpToSearch() {
        document.getElementById("homeSearchBar").scrollIntoView({
          behavior: "smooth"
        });
      },
    }
  }
</script>

<style scoped>
  #homeContentBar {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.2);
  }
  #homeTitleImg1 {
    position: absolute;
    top: 25%;
    border: 0;
    width: 44%;
    left: 28%;
  }
  #homeTitleImg2 {
    position: absolute;
    top: 42%;
    border: 0;
    width: 40%;
    left: 30%;
  }
  #headBtn {
    position: absolute;
    width: 100%;
    bottom: 25%;
    text-align: center;
  }
  .el-carousel {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
</style>